<template>
  <div style="padding: 5px;">
    <el-form ref="searchForm" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="Logistics No">
            <el-input v-model="sd.wuLiuNo" size="small" placeholder="Logistics No" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button class="mt_5" type="primary" size="mini" icon="el-icon-search" @click="searchWuLiu">search</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="16">
      <el-col :span="6" v-for="(item,index) in wlObj.list" :key="item.id + '-' + index">
        <el-card class="box-card">
          <div slot="header">
            <span style="font-size: 18px;font-weight: bold">No:{{item.wuliuno}}</span>
          </div>
          <div class="divnr">logistics Name：<span>{{item.wuliuname}}</span></div>
          <div class="divnr">Transportation Company：<span>{{item.companyname}}</span></div>
          <div class="product">
            freight:
            <el-badge :value="p.shuLiang" class="badgeitem" v-for="(p,pindex) in item.productList" :key="p.id" v-if="p.shuLiang" type="success">
              <el-button size="small">{{p.productname}}({{p.productguige}})</el-button>
            </el-badge>
          </div>
          <div class="step">
            <div style="margin: 10px auto;">
              <el-steps :active="item.activeStep" finish-status="success" process-status="finish" direction="vertical" :space="80">
                <el-step :title="s.stepname" v-for="s in item.stepList" :key="s.id">
                  <div slot="description">
                    <div>
                      {{s.desc}}
                      &nbsp;&nbsp;&nbsp;
                      <el-button size="mini" @click="imageToggle(s)" v-if="s.imageBtnShow">image<i class="el-icon-arrow-down  el-icon--right"></i></el-button>
                    </div>
                    <div v-show="s.imageToggle">
                      <ImageUpload :entityId="s.id" :entityTypeId="FileEntityType.logisticsStepImage"  :key="'ImageUpload' + s.id"></ImageUpload>
                    </div>
                  </div>
                </el-step>
              </el-steps>
            </div>
          </div>
          <div class="cardfooter">
            <el-button size="mini" type="primary" @click="editWuLiu(item.id, item.orderid)">edit</el-button>
            <el-button size="mini" type="primary" @click="stepUpdateWuLiu(item.id)">step update</el-button>
            <el-popconfirm style="margin-left: 8px;" confirmButtonText='ok' cancelButtonText='cancel'
                           icon="el-icon-info" iconColor="red"
                           title="confirm delete?" @confirm="deleteWuLiu(item.id)">
              <el-button slot="reference"  size="mini" type="danger">delete</el-button>
            </el-popconfirm>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination v-if="wlObj.total>sd.pageSize" class="center" background layout="total, prev, pager, next"
                   @current-change="getUserWuLiuData" :total="wlObj.total"
                   :current-page.sync="sd.pageNum" :page-size="sd.pageSize">
    </el-pagination>

    <el-dialog :title="popupTitle" :visible.sync="entityDetailVisible" width="880px">
      <orderlogisticsdetail v-if="entityDetailVisible" :visible.sync="entityDetailVisible" :wuLiuId="popupEntityId" :orderid="orderid"></orderlogisticsdetail>
    </el-dialog>
    <el-dialog :title="popupTitle" :visible.sync="entityUpdateStepVisible" width="880px">
      <orderlogisticsstep v-if="entityUpdateStepVisible" :visible.sync="entityUpdateStepVisible" :wuLiuId="popupEntityId"></orderlogisticsstep>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import orderlogisticsdetail from "../emp/orderlogisticsdetail";
import orderlogisticsstep from "../emp/orderlogisticsstep";
import FileEntityType from "../../utils/FileEntityType";
export default {
  components :{orderlogisticsdetail, orderlogisticsstep},
  data() {
    return {
      sd: {
        wuLiuNo : '',
        pageNum: 1,
        pageSize: 4
      },
      wlObj: {},
      entityDetailVisible : false,
      popupTitle : '',
      popupEntityId : 0,
      orderid : 0,
      entityUpdateStepVisible : false,
      FileEntityType:FileEntityType,
    }
  },
  mounted() {
    this.getUserWuLiuData();
    this.$EventBus.$on("wuliuadd", () => {
      this.sd.pageNum = 1;
      this.getUserWuLiuData();
    });
    this.$EventBus.$on("wuliuedit", () => {
      this.getUserWuLiuData();
    });
  },
  beforeDestroy() {
    this.$EventBus.$off("wuliuadd")
    this.$EventBus.$off("wuliuedit")
  },
  methods: {
    searchWuLiu(){
      this.sd.pageNum = 1;
      this.getUserWuLiuData();
    },
    getUserWuLiuData(){
      request({
        url: '/emp/orderwuliu/pagewluserwuliu',
        data: this.sd
      }).then(res => {
        const { data } = res
        this.wlObj = data
        this.wlObj.list.forEach((wlItem) =>{
          const wlItemStep = wlItem.stepList;
          for(let i=0;i<wlItemStep.length;i++){
            if(wlItemStep[i].speed !== 100){
              wlItem.activeStep = i;
              break;
            }
          }
          for(let i=0;i<wlItemStep.length;i++){
            const speed = wlItemStep[i].speed;
            wlItemStep[i].desc = speed === 100 ? 'completed' : speed > 0 ? 'In transit:' + speed+"%" : 'not started';
            wlItemStep[i].imageToggle = false;
            wlItemStep[i].imageBtnShow = speed > 0;
          }
        })
      })
    },
    editWuLiu(id, orderid){
      this.popupEntityId = id;
      this.orderid=orderid;
      this.popupTitle= "edit Logistics"
      this.entityDetailVisible= true
    },
    deleteWuLiu(id){
      request({
        url: '/emp/orderwuliu/deletewuliu',
        data: {id : id}
      }).then(res => {
        this.getUserWuLiuData();
      })
    },
    stepUpdateWuLiu(id){
      this.popupEntityId = id;
      this.popupTitle= "update Logistics step"
      this.entityUpdateStepVisible= true
    },
    imageToggle(s){
      this.$set(s,'imageToggle',!s.imageToggle)
      this.$forceUpdate()
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__header{
  padding: 8px;
}
div.divnr{
  text-indent: 12px;
  font-size: 14px;
  color: #666666;
  height: 30px;
  line-height: 30px;
}
div.cardfooter{
  text-align: right;
  padding-bottom: 5px;
  padding-right: 5px;
}
div.product{
  padding-left: 12px;
  margin-top: 10px;
  .badgeitem{
    margin-right: 20px;
    margin-bottom: 8px;
  }
}
div.step{
  padding-left: 12px;
  height: 550px;
  overflow-y: auto;
}
</style>
